<script setup>
import { ref, computed, watch } from 'vue'
import { RouterView, useRouter } from 'vue-router'
import LoginView from './views/LoginView.vue'
import MenuList from './components/MenuList.vue'
// 引入登录请求功能
import { loginApi } from "@/api/user.js"
import { getsectorsApi } from '@/api/sectors.js'
import { useUserStore, useSectorsStore } from './stores/counter'
import { showMessage } from '@/public/public.js'

const userStore = useUserStore();
const userMsg = computed(() => {
  return userStore.userMsg;
})

const avatar = ref(userMsg.value.avatar || "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg");


watch(()=>userMsg.value.avatar,(val)=>{
  avatar.value = val;
})


const sectorsStore = useSectorsStore();
const sectorsMsg = computed(() => {
  return sectorsStore.sectorsMsg;
})

const router = useRouter();


async function loginFn(un, pw) {
  //登录请求
  const loginRes = await loginApi(un, pw);
  const loginData = loginRes.data;
  console.log(loginData);

  if (loginData.code === 0) {
    const userObj = {
      token: loginData.data.token,
      username: loginData.data.username,
      staffId: loginData.data.staffId,
      role: loginData.data.role,
      accountId: loginData.data.accountId,
      avatar: loginData.data.avatar
    }
    localStorage.setItem('userMsg', JSON.stringify(userObj));
    userStore.change_userMsg(userObj);

    //请求部门所有信息
    const getsectorsRes = await getsectorsApi(loginData.data.token);
    const getsectorsData = getsectorsRes.data;
    console.log(getsectorsData);

    const sectorsArr = [];
    if(!getsectorsData.data.length){
      return;
    }else{
      getsectorsData.data.forEach((val, idx) => {
        sectorsArr.push({
          sectorId:val.sectorId,
          sectorName:val.sectorName
        })
      });
      localStorage.setItem('sectorsMsg', JSON.stringify(sectorsArr));
      sectorsStore.change_sectorsMsg(sectorsArr);
    }
    router.push("/")
  }else {
    showMessage(loginData.msg, 'error', 2000);
  }
}


function manageAccount() {
  router.push("/accountsetting")
}

function exitAccount() {
  localStorage.removeItem("userMsg");
  userStore.change_userMsg(null);

  localStorage.removeItem("sectorsMsg");
  sectorsStore.change_sectorsMsg(null);
}


</script>

<template>

  <div class="common-layout" v-if="userMsg.token">
    <el-container>
      <el-header style="background-color: var(--color-bg-text);" class="app-header">

        <h2 class="header-logo" @click="$router.push({name:'home'})"><img src="@/assets/logo.png" class="header-logo-img"></h2>

        <h3 class="header-title">飞翔教育办公OA管理系统</h3>

        <el-dropdown class="header-avatar">
          <span class="el-dropdown-link">
            <el-avatar shape="square" :size="35"
              :src="avatar" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="manageAccount">账号设置</el-dropdown-item>
              <el-dropdown-item @click="exitAccount">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </el-header>
      <el-container>
        <el-aside width="170px" class="menuListBox">
          <MenuList></MenuList>
        </el-aside>
        <el-main>
          <Suspense> <RouterView /></Suspense>
        </el-main>
      </el-container>
    </el-container>
  </div>

  <LoginView v-else @login="loginFn"></LoginView>

</template>

<style>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.app-header {
  --app-header-height: 50px;
  height: var(--app-header-height) !important;
  display: flex;
}

.header-logo {
  text-align: center;
  line-height: var(--app-header-height);
  height: var(--app-header-height);
  color: #fff;
  cursor: pointer;
}
.header-logo-img{
  display: block;
  width: 90px;
  height: 50px;
}

.header-title {
  font-size: 16px;
  flex: 1;
  text-align: center;
  line-height: var(--app-header-height);
  height: var(--app-header-height);
  color: #fff;
}

.header-avatar {
  height: 35px;
  margin-top: 7px;
  cursor: pointer;
}

.menuListBox .el-row {
  display: block;
}

.menuListBox .el-row .el-col-12 {
  max-width: 100%;
}

.el-container {
  width: 100%;
}

.el-aside a {
  display: block
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}
</style>